<template>
	<view>
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000" backState="1000">
			<view class="title-box"><text>订单记录</text></view>
		</z-nav-bar>
		<u-sticky :offsetTop="offsetTop">
			<view class="filterBox">
				<view class="flex-row-center" @click="showDateTime = !showDateTime">
					<text style="margin-right: 8rpx;">{{ filterTime }}</text>
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
				<view class="flex-row-center" @click="showSource = !showSource">
					<text style="margin-right: 8rpx;">{{ currentSource.statusStr }}</text>
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
				<view class="flex-row-center" @click="showSettlement = !showSettlement">
					<text style="margin-right: 8rpx;">{{ currentSettlement.statusStr }}</text>
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
			</view>
			<view class="statisticsBox flex-row-center-sb">
				<view>
					<text style="color: #333;">订单总数:</text>
					{{statistic.orderNumber||0}}
				</view>
			<!-- 	<view>
					<text style="color: #333;">总收取租金:</text>
					{{statistic.totalCollectingRent||0}}元
				</view> -->
				<view>
					<text style="color: #333;">总托管费用:</text>
					{{statistic.totalEscrowAmount||0}}元
				</view>
			</view>
		</u-sticky>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="mainBox">
				<view class="item" v-for="(item, index) in list" :key="item.orderNo">
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">订单状态</text>
						<text class="text-value">{{item.orderStatus|shortOrderStatus}}</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">预计取车时间</text>
						<text class="text-value">{{item.rentalStartTime|filterNull}}</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">预计还车时间</text>
						<text class="text-value">{{item.rentalEndTime|filterNull}}</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">实计取车时间</text>
						<text class="text-value">{{item.actualStartTime|filterNull}}</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">实计还车时间</text>
						<text class="text-value">{{item.actualEndTime|filterNull}}</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">托管单价</text>
						<text  class="text-value">{{item.escrowUnitPrice||'--'}}元/天</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">用车天数</text>
						<text v-if="item.orderStatus>4 && item.orderStatus !=10" class="text-value">{{item.escrowOrderDays||0}}天</text>
						<text v-else class="text-value">--</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">托管费用</text>
						<text v-if="item.orderStatus>4 && item.orderStatus !=10" class="text-value">{{item.escrowAmount||0}}元</text>
						<text v-else class="text-value">--</text>
					</view>
					<view class="flex-row-center-sb rowLine">
						<text class="text-name" style="color: #666;">结算状态</text>
						<text v-if="item.orderStatus>4 && item.orderStatus !=10" class="text-value">{{item.settlementStatus ==2?'已结算' : '待结算'}}</text>
						<text v-else class="text-value">--</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 日期筛选 -->
		<u-datetime-picker
			v-model="currentDate"
			ref="datetimePicker"
			closeOnClickOverlay
			:show="showDateTime"
			@close="showDateTime = false"
			@cancel="showDateTime = false"
			:formatter="formatter"
			mode="year-month"
			title="选择月份"
			confirmColor="#1573FF"
			@confirm="confimDate"
		></u-datetime-picker>

		<view v-if="showSource" class="filterPop" :style="[{ top: popTop }]">
			<view class="filterContent flex-row-center-sb">
				<text
					class="filterItem"
					:class="{ active: currentSource.code === item.code }"
					v-for="(item, index) in status"
					:key="index"
					@click.stop="changeSource(item)"
				>
					{{ item.statusStr }}
				</text>
			</view>
		</view>
		
		<view v-if="showSettlement" class="filterPop" :style="[{ top: popTop }]">
			<view class="filterContent flex-row-center-sb">
				<text
					class="filterItem"
					:class="{ active: currentSettlement.code === item.code }"
					v-for="(item, index) in settlementStatus"
					:key="index"
					@click.stop="changeSettlement(item)"
				>
					{{ item.statusStr }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import * as carOwnerApi from '@/api/carOwner-api.js';
let moment = require('@/utils/moment.js');
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			carId: '',
			offsetTop: 0,
			currentDate: moment(),
			showDateTime: false,
			list: [1, 2, 3],
			filterTime: moment().format('YYYY-MM'),
			showSource: false,
			showSettlement:false,
			popTop: this.StatusBar + this.CustomBar + 26 + 'px',
			currentSource: {
				statusStr: '订单来源',
				code: 0
			},
			status: [
				{
					statusStr: '全部',
					code: 0
				},
				{
					statusStr: '平台-小程序',
					code: 1
				},
				{
					statusStr: '平台-后台',
					code: 2
				},
				{
					statusStr: '平台-管理端',
					code: 3
				},
				{
					statusStr: '平台-携程',
					code: 4
				}
			],
			currentSettlement: {
				statusStr: '结算状态',
				code: 1
			},
			settlementStatus: [
				{
					statusStr: '全部',
					code: 1
				},
				{
					statusStr: '未完成',
					code: 2
				},
				{
					statusStr: '待结算',
					code: 3
				},
				{
					statusStr: '已结算',
					code: 4
				}
			],
			statistic:{}
		};
	},
	onLoad(op) {
		this.carId = op.carId; 
		this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750) * uni.getSystemInfoSync().windowWidth - 0.5;
		// this.getStatisticsCarOrder();
	},
	methods: {
		//获取列表
		upCallback(page) {
			this.getStatisticsCarOrder();
			let param = {
				pageNum: page.num,
				pageSize: page.size,
				carId: this.carId,
				orderSource: this.currentSource.code,
				orderMonth : this.filterTime,
				settlementStatus:this.currentSettlement.code
			};
			carOwnerApi
				.mySelfOrderList(this.toParams(param))
				.then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		// 获取订单总数及总租金
		getStatisticsCarOrder(){
			let param = {
				carId: this.carId,
				orderSource: this.currentSource.code,
				orderMonth : this.filterTime
			};
			carOwnerApi.statisticsCarOrder(this.toParams(param)).then(res=>{
				this.statistic = res.data;
			})
		},
		// 确定加油日期
		confimDate(e) {
			this.filterTime = moment(e.value).format('YYYY-MM');
			this.showDateTime = false;
			this.mescroll.triggerDownScroll();
			this.getStatisticsCarOrder();
		},
		// 客户来源
		changeSource(item) {
			this.currentSource = item;
			this.showSettlement= false;
			this.showSource = !this.showSource;
			this.mescroll.triggerDownScroll();
			this.getStatisticsCarOrder();
		},
		changeSettlement(item){
			this.showSource = false;
			this.currentSettlement = item;
			this.showSettlement = !this.showSettlement;
			this.mescroll.triggerDownScroll();
			this.getStatisticsCarOrder();
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			return value;
		}
	}
};
</script>

<style lang="scss" scoped>
.filterBox {
	padding: 20upx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(90deg, #3599ff 0%, #0275ed 100%);
	font-size: 28rpx;
	color: #fff;
}
.statisticsBox {
	flex: 2;
	padding: 20rpx 40rpx;
	color: #2879ff;
	font-size: 28rpx;
	background-color: #f5f5f5;
}
.mainBox {
	padding: 0 20rpx;
	.item {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		.rowLine {
			padding: 12rpx 0;
		}
	}
}
.filterPop {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999999999;

	.filterContent {
		background-color: #ffffff;
		padding: 40rpx 44rpx 28rpx;
		flex-wrap: wrap;
		.filterItem {
			width: 180rpx;
			line-height: 52rpx;
			text-align: center;
			background: #efefef;
			border-radius: 6rpx;
			color: #666666;
			font-size: 28rpx;
			margin-bottom: 20rpx;

			&.active {
				background: #1673ff;
				color: #ffffff;
			}
		}
	}
}
</style>
